<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="/home">home</a>
    <a href="/about">about</a>

    <div id="content" style="margin:50px;">
        default
    </div>

    <script>
        const contentEl = document.getElementById("content");
        const aEls = document.getElementsByTagName("a");
        for(let a of aEls) {
            // console.log(a)
            a.addEventListener("click", e => {
                e.preventDefault();   //阻止a标签点击 默认行为

                const href = a.getAttribute("href");
                // history.pushState({}, "", href);
                history.replaceState({}, "", href);
                changeContent();
            })
        };
        const changeContent = () => {
            switch(location.pathname) {
                case "/home":
                    contentEl.innerHTML = "home"
                    break;
                case "/about":
                    contentEl.innerHTML = "about"
                    break;
                default: 
                    contentEl.innerHTML = "Default";
            }
        };

        //浏览器返回时 执行的是popstate操作
        window.addEventListener("popstate", changeContent);

        
    </script>
</body>
</html>